<div>
    <el-row :gutter="20">
        <el-col :span="5">
            <el-button
                    v-if="needAliMgrRole"
                    type="primary"  @click="openFormWin">新建商品</el-button></el-col>
        <el-col :span="15" >
            所属生活号：
            <el-select v-model="srchLifeIds" multiple placeholder="请选择">
                <el-option
                        v-for="life in allLifes"
                        :key="life.id"
                        :label="life.name"
                        :value="life.id">
                </el-option>
            </el-select>
            名称：
            <el-input style="width: 150px"  placeholder="商品名称"
                    v-model="pageInfo.srch_LIKE_name" autocomplete="off"></el-input>
            <el-button type="primary"  @click="initData">搜索 </el-button>
        </el-col>
    </el-row>
    <el-row>
        <el-table
                :data="tableData"
                stripe
                border
                style="width: 100%;margin-top: 10px">
            <el-table-column
                    prop="name"
                    label="商品名称">
            </el-table-column>
            <el-table-column
                    prop="descript"
                    label="商品描述">
            </el-table-column>
            <el-table-column
                    prop="akjAlipayLife.name"
                    label="所属生活号">
            </el-table-column>
            <el-table-column
                    prop="createAt"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格(单位：元)">
            </el-table-column>
            <el-table-column
                    prop="activationTime"
                    label="免激活时长">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button @click="openDetails(scope.row)" type="text" size="small">查看详情</el-button><br>
                    <el-button @click="updateData(scope.row)"
                               v-if="needAliMgrRole"
                               type="text" size="small">编辑</el-button><br>
                    <el-button @click="deleteData(scope.row)"
                               v-if="needAliMgrRole"
                               type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <div class="marginT10 center">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="handleCurrentChange"
                    :page-size="pageInfo.pageSize"
                    :total="pageInfo.totalNum">
            </el-pagination>
        </div>
    <el-dialog title="新建商品" :visible.sync="dialogFormVisible"  width="50%">
        <el-form :model="form">
            <el-form-item label="商品名称：" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品描述：" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="form.descript" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品价格：" :label-width="formLabelWidth">
                <el-input-number v-model="form.price" :precision="2" :step="0.1" :min="0"></el-input-number>（元）
            </el-form-item>
            <el-form-item label="免激活时长" :label-width="formLabelWidth">
                <el-input-number v-model="form.activationTime"  :step="1" :min="1" max="60"></el-input-number>
            </el-form-item>
            <el-form-item label="关联生活号：" :label-width="formLabelWidth">
                <el-select v-model="form.relateLife" placeholder="请选择">
                    <el-option
                            v-for="life in allLifes"
                            :key="life.id"
                            :label="life.name"
                            :value="life.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品封面图：" :label-width="formLabelWidth">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <el-upload
                        name="file"
                        :data="fileData"
                        :headers="uploadHead"
                        class="avatar-uploader"
                        :action="fileAction"
                        :before-upload="beforeUpload"
                        :show-file-list="false"
                        :on-success="handleImgSuccess">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

                <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="showEditWin"  width="50%">
        <el-form :model="editForm">
            <el-form-item label="商品名称：" :label-width="formLabelWidth" >
                <el-input v-model="editForm.name" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品描述：" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="editForm.descript" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品价格：" :label-width="formLabelWidth">
                <el-input-number v-model="editForm.price" :precision="2" :step="0.1" :min="0"></el-input-number>元
            </el-form-item>
            <el-form-item label="免激活时长" :label-width="formLabelWidth">
                <el-input-number v-model="editForm.activationTime"  :step="1" :min="1" max="60"></el-input-number>
            </el-form-item>
            <el-form-item label="关联生活号：" :label-width="formLabelWidth">
                <el-select v-model="editForm.relateLife" placeholder="请选择">
                    <el-option
                            v-for="life in allLifes"
                            :key="life.id"
                            :label="life.name"
                            :value="life.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品封面图：" :label-width="formLabelWidth">
                <img v-if="editImageUrl" :src="editImageUrl" class="avatar">
                <el-upload
                        name="file"
                        :data="fileData"
                        :headers="uploadHead"
                        class="avatar-uploader"
                        :action="fileAction"                        :show-file-list="false"
                        :on-success="handleEditImgSuccess">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

                <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelEdit">取 消</el-button>
            <el-button type="primary" @click="submitEditForm">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="详情" :visible.sync="showDetailWin"  width="50%">
        <el-form :model="detailForm" :disabled="disableDetailForm">
            <el-form-item label="商品名称：" :label-width="formLabelWidth">
                <el-input v-model="detailForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品描述：" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="detailForm.descript" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品价格：" :label-width="formLabelWidth">
                <el-input v-model="detailForm.price+'元'" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="免激活时长" :label-width="formLabelWidth">
                <el-input v-model="detailForm.activationTime"  ></el-input  >
            </el-form-item>
            <el-form-item label="关联生活号：" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="detailForm.akjAlipayLife.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品封面图：" :label-width="formLabelWidth">

                <img v-if="detailForm.img.absPath" :src="detailForm.img.absPath" class="avatar">

                <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
                    <img width="100%" :src="detailForm.img.absPath" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="创建人：" :label-width="formLabelWidth">
<!--                <el-input v-model="detailForm.createBy.name" autocomplete="off"></el-input>-->
                {{detailForm.createBy.name}}
            </el-form-item>
            <el-form-item label="创建时间：" :label-width="formLabelWidth">
                {{detailForm.createAt}}
            </el-form-item>
            <el-form-item label="最后编辑人：" :label-width="formLabelWidth">
                {{detailForm.updateBy.name}}
            </el-form-item>
            <el-form-item label="最后编辑时间：" :label-width="formLabelWidth">
                {{detailForm.updateAt}}
            </el-form-item>
        </el-form>

    </el-dialog>
</div>